<template>
  <view>
    <app-page :cusStyle="{ padding: '15px' }">
      <mxp-form
        ref="mxpFormRef"
        itemLabelWidth="32px"
        :model="userFrom"
        :rules="rules"
        itemErrorAlign="right"
        :background="defThemeColor.fill"
        :cusStyle="{ padding: '0 10px', borderRadius: '10px', overflow: 'hidden', marginTop: '15px' }"
        :fromBorderColor="false"
      >
        <mxp-form-item label="昵称" prop="nickname">
          <mxp-input v-model="userFrom.nickname" textAlign="right"></mxp-input>
        </mxp-form-item>
        <mxp-form-item label="性别" prop="sex">
          <mxp-list-item-info placeholder="请选择">
            <mxp-radio-list
              v-model="userFrom.sex"
              :list="[
                { label: '保密', value: 0 },
                { label: '男', value: 1 },
                { label: '女', value: 2 },
              ]"
            ></mxp-radio-list>
          </mxp-list-item-info>
        </mxp-form-item>
        <mxp-form-item :borderColor="false" :hover="true" :arrow="true" label="生日" prop="birthday" @click="openPickerDate">
          <mxp-list-item-info placeholder="请选择" :info="userFrom.birthday"></mxp-list-item-info>
        </mxp-form-item>
      </mxp-form>
      <view style="margin-top: 40px">
        <mxp-button text="保存" :loading="loading" :disabled="loading" @click="submit"></mxp-button>
      </view>
    </app-page>
    <mxp-picker-date ref="mxpPickerDateRef"></mxp-picker-date>
  </view>
</template>

<script setup lang="ts">
  import AppPage from '@/components/app-page/app-page.vue';
  import MxpButton from '@/mxp-ui/mxp-button/mxp-button.vue';
  import MxpForm, { type $Rules } from '@/mxp-ui/mxp-form/mxp-form.vue';
  import MxpInput from '@/mxp-ui/mxp-input/mxp-input.vue';
  import MxpFormItem from '@/mxp-ui/mxp-form-item/mxp-form-item.vue';
  import MxpRadioList from '@/mxp-ui/mxp-radio-list/mxp-radio-list.vue';
  import MxpPickerDate from '@/mxp-ui/mxp-picker-date/mxp-picker-date.vue';
  import MxpListItemInfo from '@/mxp-ui/mxp-list-item-info/mxp-list-item-info.vue';
  import { computed, reactive, ref } from 'vue';
  import { useAppStore } from '@/pinia/app';
  import useMxpToastRefHooks from '@/utils/hooks/useToast';
  import { updateUserInfoAxios } from '@/api/user';
  import { defThemeColor } from '@/mxp-ui/mxp-tool/theme/theme';

  const mxpFormRef = ref<InstanceType<typeof MxpForm> | null>(null);
  const mxpToastRef = useMxpToastRefHooks();
  const mxpPickerDateRef = ref<InstanceType<typeof MxpPickerDate>>();
  const appStore = useAppStore();
  const userInfo = computed(() => appStore.userInfo);
  const loading = ref(false);
  const userFrom = reactive({
    sex: 0 as 0 | 1 | 2,
    birthday: '',
    nickname: userInfo.value?.nickname || '',
  });

  const rules: $Rules = {
    nickname: [
      { type: 'string', required: true, message: '昵称不能为空', trigger: ['blur', 'change'] },
      { type: 'string', max: 12, message: '昵称最多12个字', trigger: ['blur', 'change'] },
    ],
    sex: [
      { type: 'number', required: true, message: '请选择性别', trigger: ['blur', 'change'] },
      { type: 'number', max: 2, min: 0, message: '性别不合法', trigger: ['blur', 'change'] },
    ],
    birthday: [{ type: 'string', required: true, message: '生日不能为空', trigger: ['blur', 'change'] }],
  };
  /** 修改生日 */
  function openPickerDate() {
    mxpPickerDateRef.value?.show({
      defaultDate: userFrom.birthday,
      confirm: (value) => {
        userFrom.birthday = value;
        mxpFormRef.value?.validateField('birthday');
      },
    });
  }

  /** 保存 */
  async function submit() {
    try {
      await mxpFormRef.value?.validate();
      loading.value = true;
      const { sex, birthday, nickname } = userFrom;
      await updateUserInfoAxios({ sex, birthday, nickname });
      const user = { ...userInfo.value!, ...userFrom };
      user.nickname = nickname;
      appStore.setUserInfo(user);
      loading.value = false;
      mxpToastRef.value?.showSuccess('修改成功');
      setTimeout(() => {
        uni.navigateBack();
      }, 500);
    } catch (err) {
      loading.value = false;
      mxpToastRef.value?.showError(Array.isArray(err) && err[0] && err[0].message ? err[0].message : err.msg || '登录失败,-BD0002');
    }
  }
</script>
